<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style type="text/css">
			.mui-content{
				/* background-color: #FFFFFF; */
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="backMeter" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">用户信息</h1>
		</header>
		<div class="mui-content">
			<ul id="usermessage" class="mui-table-view">
				<!-- <li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<div class="mui-media-body">
							<span>陈琳</span>
							<span style="color: gray;">0110010001</span>
							<p class="mui-ellipsis" style="font-size: 13pt;">011001000101</p>
						</div>
					</a>
				</li> -->
			</ul>
		</div>
		
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="http://103.59.149.116:6198/hcys/js/mapi.js"></script> -->
		<script src="js/Mobile.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			
			// mui.init()
			mui.plusReady(function () {
				var myStorage = JSON.parse(localStorage.getItem("users"));
				var glbToken = myStorage.glbToken;
				
				var self = plus.webview.currentWebview();
				var userName = self.userName;
				// alert(userName);
				var userListArr = getUserTable(glbToken, 1, 20, userName).rows;
				var list = "";
				for (var i = 0; i < userListArr.length; i++) {
					list += "<li class='mui-table-view-cell mui-media'>"
						+"<a href='javascript:;'>"+"<div class='mui-media-body'>"
						+"<span>姓名：" + userListArr[i].UserName + "&nbsp;&nbsp;" + "</span><br/>"
						+"<span>地址：" + userListArr[i].UserAddress + "&nbsp;&nbsp;" + "</span><br/>"
						+"<span>电话：" + userListArr[i].Phone + "</span><br/>"
						+ "<span style='color: gray;'>用户号："
						+ userListArr[i].UserID + "</span>"
						+ "<p class='mui-ellipsis' style='font-size: 13pt;'>水表号："
						+ userListArr[i].WaterID + "</p>" 
						+ "</div>" + "</a>" + "</li>";
				}
				// list = "<ul class='mui-table-view'>" +list+ "</ul>";
				var userLists = document.getElementById("usermessage");
				userLists.innerHTML = list;
				
				$(".mui-media").each(function(i, n) {
					$(".mui-media")[i].onclick = function() {
						// 分别取得用户号及水表号
						var userIdList = n.getElementsByTagName("span")[3].innerText.substr(4);
						var waterID = n.getElementsByTagName("p")[0].innerText.substr(4);
						// alert(waterID)
						// localStorage.setItem('userIds', JSON.stringify(userIdList));
						// 返回用户号及水表号到meterReading页面
						mui.plusReady(function () {
							var mR = plus.webview.getWebviewById("meterReading.html");
							mui.fire(mR, "select",{userIdList:userIdList, waterID:waterID});
							mui.back();
							// mui.back();
						})
					}
				})
			})
			
			
		</script>
	</body>

</html>
